<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sportTrend</title>
    <link href= "../css/app.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet"type="text/css"href="../css/userAnalysis.css">
    <script src="../js/jquery-2.1.0.min.js"></script>
    <script src="../js/app.js"></script>
    <script rel="stylesheet" src="../js/echarts.min.js"></script>
    <style type="text/css">
        #chart1{
              width: 70%;
              height: 400px;
              margin-top: 5%;
              left: 10%;
              border: 2px solid yellow;
          }
        #chart2,#chart3{
            width: 70%;
            height: 400px;
            margin-top: 5%;
            left: 10%;
            border: 2px solid yellow;
        }
    </style>
</head>
<body>
<div class="contain">
    <div class="title"style="margin-left: 0px;width: 250px;margin-top: 0px;">
        <a href="../ui/teachermanage.html" style="float: left;width: 150px;text-decoration: none">
            <img src="../image/运动世界.png" style="width: 30px;height: 35px;margin-left: 50px;margin-top:10px;float: left">
            <p style="color: #0398ff;margin-left: 20px">运动世界</p>
        </a>
    </div>
    <div class="title">
        <a id="add" href="#" style="color: black;margin-left: -100px">大连东软信息学院</a>
    </div>
    <div class="title" style="margin-top: 5px">
        <span>dldrxxadmin，欢迎您</span>
    </div>
</div>
<div class="touming">
    <div class="show">
        <div class="show-search">
            <input type="text" class="search-text" style="width: 250px;height: 30px;margin-top: 10px;margin-left: 50px" placeholder="请输入学校名称" name="q">
            <button type="submit" class="search-ic"><img src="../image/查找.png" style="width: 15px;height: 15px"></button>
        </div>
        <div style="clear: both"></div>
        <a href="" id="name"style="margin-top: 20px;width: 300px">大连东软信息学院(点击收回)</a>
    </div>
</div>
<div class="logo-right">
    <div class="module">
        <a href="../ui/realTime.html">
            <img src="../image/数据总览.png" style="width: 22px;height: 22px">
            <span style="color: black">数据总览</span>
        </a>
    </div>
    <div class="module">
        <a href="../ui/semestermanage.html">
            <img src="../image/学期管理.png" style="width: 22px;height: 22px">
            <span style="color: black">学期管理</span>
        </a>
    </div>
    <div class="module">
        <a href="../ui/PEadmin.html" >
            <img src="../image/退出.png" style="width: 22px;height: 22px">
            <span style="color: black">退出</span>
        </a>
    </div>
</div>
<div class="sidebar">
    <div class="left">
        <a href="../ui/realTime.html"style="text-decoration: none">实时统计</a>
        <a href="../ui/sportTrend.html"style="text-decoration: none">运动趋势</a>
        <a href="../ui/userAnalysis.html"style="text-decoration: none">用户分析</a>
        <a href="../ui/sportAnalysis.html"style="text-decoration: none">跑步分析</a>
    </div>
</div>
<div class="content">
    <div id="dataScreening">
        <div class="list">
            <div id="chart1"></div>
            <div id="chart2"></div>
            <div id="chart3"></div>

        </div>
    </div>
</div>
<div class="footer">
    <span  style="margin-left: 120px;">客服电话：400 800 9198</span>
    <span  style="margin-left: 80px;">ZHE JIANG WAN HANG INFORMATION TECHNOLOGY CO. LTD</span>
</div>

<script>
    $('#add').click(function () {
        $('.touming').show();

    })
    $('#show-icon').click(function () {
        $('.touming').hide();
    })
</script>
<script type="text/javascript">
    $(function(){
    })
    function openDialog(){
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block'
    }
    function closeDialog(){
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none'
    }
</script>

<script type="text/javascript">
    var chart1 = echarts.init(document.getElementById("chart1"));

    var color = ['#FFF68F','#FF4500' ];

    var data =[{name: '男：3724人 61.1%', value: 3724}, {name: '女：2367人 38.9%', value: 2367}];

    // 指定图表的配置项和数据
    var option = {
        //背景色
        backgroundColor: {			// 背景颜色
            // type: 'linear',
            // x: 0,
            // y: 0,
            // x2: 0,
            // y2: 1,
            backgroundColor: '#fff',//背景色
            colorStops: [{
                offset: 0, color: 'rgba(0,0,0,0.4)' // 0% 处的颜色
            }, {
                offset: 0.5, color: 'rgba(0,0,0,0.4)' 	// 50% 处的颜色
            }, {
                offset: 1, color: 'rgba(0,0,0,0.4)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
        },

        title: [{
            text: '性别区分',
            top:'5%',
            left:'3%',
            textStyle:{
                color: '#000',
                fontSize:12,
            }
        }],

        // 图例
        legend: [{
            selectedMode:true,             // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
            top: '10%',
            left: 'center',
            textStyle: {                      // 图例的公用文本样式。
                fontSize: 14,
                color: '#fff'
            },
            data: ['男：3724人 61.1%','女：2367人 38.9%']
        }],

        tooltip: {
            show: true,
            // formatter: '{b} </br> 销量{c}件 </br> 占比{d}%'      // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
            formatter: data
        },

        graphic: {
            type: 'text',               // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
            top: 'center',              // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
            left: 'center',             // 同上
            style: {
                text: '\n',
                fill: '#fff',           // 填充色。
                // fontSize: 16,
                // fontWeight: 'bold'
            }
        },

        // 系列列表
        series: [{
            name: '圆环图系列名称',         // 系列名称
            type: 'pie',                    // 系列类型
            center:['50%','50%'],           // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
            radius: ['35%', '45%'],         // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
            hoverAnimation: true,           // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
            color: color,                   // 圆环图的颜色
            label: {                        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
                normal: {
                    show: true,             // 是否显示标签[ default: false ]
                    position: 'outside',    // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
                    formatter: '{b} : {c}件'  // 标签内容
                }
            },
            labelLine: {                    // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
                normal: {
                    show: true,             // 是否显示视觉引导线。
                    length: 15,             // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
                    length2: 10,            // 视觉引导项第二段的长度。
                    lineStyle: {            // 视觉引导线的样式
                        //color: '#000',
                        //width: 1
                    }
                }
            },
            data: data                      // 系列中的数据内容数组。
        }]
    };
    // 使用刚指定的配置项和数据显示图表
    chart1.setOption(option)
</script>

<script type="text/javascript">
    var chart1 = echarts.init(document.getElementById("chart2"));

    var color = ['#FFF68F','#FF4500','#BFEFFF','#B3EE3A' ,'#7B68EE','#CD3278'];

    var data =[{name: '2018级：2950人 45.1%', value: 2950},
        {name: '2017级：3575人 54.7%', value: 3575},
        {name:'2016级：7人 0.1%'},
        {name:'2015级：1人 0.0%'},
        {name:'2014级：0人 0.0%'},
        {name:'2013级：1人 0.0%'}];

    // 指定图表的配置项和数据
    var option = {
        //背景色
        backgroundColor: {			// 背景颜色
            // type: 'linear',
            // x: 0,
            // y: 0,
            // x2: 0,
            // y2: 1,
            backgroundColor: '#fff',//背景色
            colorStops: [{
                offset: 0, color: 'rgba(0,0,0,0.4)' // 0% 处的颜色
            }, {
                offset: 0.5, color: 'rgba(0,0,0,0.4)' 	// 50% 处的颜色
            }, {
                offset: 1, color: 'rgba(0,0,0,0.4)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
        },

        title: [{
            text: '年级区分',
            top:'5%',
            left:'3%',
            textStyle:{
                color: '#000',
                fontSize:12,
            }
        }],

        // 图例
        legend: [{
            selectedMode:true,             // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
            top: '10%',
            left: 'center',
            textStyle: {                      // 图例的公用文本样式。
                fontSize: 14,
                color: '#fff'
            },
            data: ['2018级：2950人 45.1%','2017级：3575人 54.7%','2016级：7人 0.1%'
            ,'2015级：1人 0.0%','2014级：0人 0.0%','2013级：1人 0.0%']
        }],

        tooltip: {
            show: true,
            // formatter: '{b} </br> 销量{c}件 </br> 占比{d}%'      // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
            formatter: data
        },

        graphic: {
            type: 'text',               // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
            top: 'center',              // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
            left: 'center',             // 同上
            style: {
                text: '\n',
                fill: '#fff',           // 填充色。
                // fontSize: 16,
                // fontWeight: 'bold'
            }
        },

        // 系列列表
        series: [{
            name: '圆环图系列名称',         // 系列名称
            type: 'pie',                    // 系列类型
            center:['50%','50%'],           // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
            radius: ['35%', '45%'],         // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
            hoverAnimation: true,           // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
            color: color,                   // 圆环图的颜色
            label: {                        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
                normal: {
                    show: true,             // 是否显示标签[ default: false ]
                    position: 'outside',    // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
                    formatter: '{b} : {c}件'  // 标签内容
                }
            },
            labelLine: {                    // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
                normal: {
                    show: true,             // 是否显示视觉引导线。
                    length: 15,             // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
                    length2: 10,            // 视觉引导项第二段的长度。
                    lineStyle: {            // 视觉引导线的样式
                        //color: '#000',
                        //width: 1
                    }
                }
            },
            data: data                      // 系列中的数据内容数组。
        }]
    };
    // 使用刚指定的配置项和数据显示图表
    chart1.setOption(option)
</script>

<script type="text/javascript">
    var chart1 = echarts.init(document.getElementById("chart3"));

    var color = ['#FFF68F','#FF4500' ];

    var data =[{name: '南校区：133人 2.0%', value: 133}, {name: '大连东软信息学院 6417人 98.0%', value: 6417}];

    // 指定图表的配置项和数据
    var option = {
        //背景色
        backgroundColor: {			// 背景颜色
            // type: 'linear',
            // x: 0,
            // y: 0,
            // x2: 0,
            // y2: 1,
            backgroundColor: '#fff',//背景色
            colorStops: [{
                offset: 0, color: 'rgba(0,0,0,0.4)' // 0% 处的颜色
            }, {
                offset: 0.5, color: 'rgba(0,0,0,0.4)' 	// 50% 处的颜色
            }, {
                offset: 1, color: 'rgba(0,0,0,0.4)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
        },

        title: [{
            text: '校区区分',
            top:'5%',
            left:'3%',
            textStyle:{
                color: '#000',
                fontSize:12,
            }
        }],

        // 图例
        legend: [{
            selectedMode:true,             // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
            top: '10%',
            left: 'center',
            textStyle: {                      // 图例的公用文本样式。
                fontSize: 14,
                color: '#fff'
            },
            data: [ '南校区：133人 2.0%', '大连东软信息学院 6417人 98.0%']
        }],

        tooltip: {
            show: true,
            // formatter: '{b} </br> 销量{c}件 </br> 占比{d}%'      // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
            formatter: data
        },

        graphic: {
            type: 'text',               // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
            top: 'center',              // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
            left: 'center',             // 同上
            style: {
                text: '\n',
                fill: '#fff',           // 填充色。
                // fontSize: 16,
                // fontWeight: 'bold'
            }
        },

        // 系列列表
        series: [{
            name: '圆环图系列名称',         // 系列名称
            type: 'pie',                    // 系列类型
            center:['50%','50%'],           // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
            radius: ['35%', '45%'],         // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
            hoverAnimation: true,           // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
            color: color,                   // 圆环图的颜色
            label: {                        // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
                normal: {
                    show: true,             // 是否显示标签[ default: false ]
                    position: 'outside',    // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
                    formatter: '{b} : {c}件'  // 标签内容
                }
            },
            labelLine: {                    // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
                normal: {
                    show: true,             // 是否显示视觉引导线。
                    length: 15,             // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
                    length2: 10,            // 视觉引导项第二段的长度。
                    lineStyle: {            // 视觉引导线的样式
                        //color: '#000',
                        //width: 1
                    }
                }
            },
            data: data                      // 系列中的数据内容数组。
        }]
    };
    // 使用刚指定的配置项和数据显示图表
    chart1.setOption(option)
</script>

</body>
</html>